import { h } from 'preact';
import { fireEvent, render } from '@testing-library/preact';
import { SearchFormSync } from '../SearchFormSync';

function setWindowLocation(url = '') {
  delete window.location; // Inspired from https://www.benmvp.com/blog/mocking-window-location-methods-jest-jsdom/
  window.location = new URL(url);
}

// a11y tests are not required for this component as it's job is to provide data to other components.
// There is nothing UI related about this component.
describe('<SearchFormSync />', () => {
  beforeEach(() => {
    // This part of the DOM would be rendered in the search results from the server side.
    // See search.html.erb.
    // It is where the portal will render.
    document.body.innerHTML =
      '<div id="mobile-search-container"><form></form></div>';

    setWindowLocation(`https://localhost:3000/`);

    global.InstantClick = jest.fn(() => ({
      on: jest.fn(),
      off: jest.fn(),
      preload: jest.fn(),
      display: jest.fn(),
    }))();
  });

  // it('should synchronize search forms', async () => {
  //   const { getByRole, getAllByRole } = render(<SearchFormSync />);

  //   // Only one input is rendered at this point because the synchSearchForms custom event is what
  //   // tells us that there is a new search form to sync with the existing one.
  //   const searchInput = await getByRole('textbox', { name: /search/i });

  //   // Because window.location has no search term in it's URL
  //   expect(searchInput.value).toEqual('');

  //   // https://www.theatlantic.com/technology/archive/2012/09/here-it-is-the-best-word-ever/262348/
  //   const searchTerm = 'diphthong';

  //   // simulates a search result returned which contains the server side rendered search form for mobile only.
  //   setWindowLocation(`https://localhost:3000/search?q=${searchTerm}`);

  //   fireEvent(
  //     window,
  //     new CustomEvent('syncSearchForms', {
  //       detail: { querystring: window.location.search },
  //     }),
  //   );

  //   const [desktopSearch, mobileSearch] = await getAllByRole('textbox', {
  //     name: /search/i,
  //   });

  //   expect(desktopSearch.value).toEqual(searchTerm);
  //   expect(mobileSearch.value).toEqual(searchTerm);
  // });

  // it('should synchronize search forms on a subsequent search', async () => {
  //   const { getByRole, getAllByRole } = render(<SearchFormSync />);

  //   // Only one input is rendered at this point because the synchSearchForms custom event is what
  //   // tells us that there is a new search form to sync with the existing one.
  //   const searchInput = await getByRole('textbox', { name: /search/i });

  //   // Because window.location has no search term in it's URL
  //   expect(searchInput.value).toEqual('');

  //   // https://www.theatlantic.com/technology/archive/2012/09/here-it-is-the-best-word-ever/262348/
  //   const searchTerm = 'diphthong';

  //   // simulates a search result returned which contains the server side rendered search form for mobile only.
  //   setWindowLocation(`https://localhost:3000/search?q=${searchTerm}`);

  //   fireEvent(
  //     window,
  //     new CustomEvent('syncSearchForms', {
  //       detail: { querystring: window.location.search },
  //     }),
  //   );

  //   let [desktopSearch, mobileSearch] = await getAllByRole('textbox', {
  //     name: /search/i,
  //   });

  //   expect(desktopSearch.value).toEqual(searchTerm);
  //   expect(mobileSearch.value).toEqual(searchTerm);

  //   const searchTerm2 = 'diphthong2';

  //   // simulates a search result returned which contains the server side rendered search form for mobile only.
  //   setWindowLocation(`https://localhost:3000/search?q=${searchTerm2}`);

  //   const oldPortalContainer = document.getElementById(
  //     'mobile-search-container',
  //   );

  //   const newPortalContainer = oldPortalContainer.cloneNode(true);

  //   // This simulates the search results wiping out the old portal container
  //   // and providing a new portal container (different DOM elements).
  //   document.body.removeChild(oldPortalContainer);
  //   document.body.prepend(newPortalContainer);

  //   fireEvent(
  //     window,
  //     new CustomEvent('syncSearchForms', {
  //       detail: { querystring: window.location.search },
  //     }),
  //   );

  //   [desktopSearch, mobileSearch] = await getAllByRole('textbox', {
  //     name: /search/i,
  //   });

  //   expect(desktopSearch.value).toEqual(searchTerm2);
  //   expect(mobileSearch.value).toEqual(searchTerm2);
  // });

  it('ensure both mobile search form & desktop search form exists', async () => {
    const { getAllByRole } = render(<SearchFormSync />);

    setWindowLocation(`https://localhost:3000/search`);

    // fire click event twice with empty query to mimic clicking search button twice present in header
    for (let i = 0; i < 2; i += 1) {
      fireEvent(
        window,
        new CustomEvent('syncSearchForms', {
          detail: { querystring: window.location.search },
        }),
      );
    }

    const forms = await getAllByRole('textbox', {
      name: /search/i,
    });

    expect(forms.length).toEqual(2);
  });
});
